<template>
	<el-container style="background-color: white;">
		<div class='report_detail'>
			<el-header height="560px" style="padding: 0px; overflow: hidden;">
				<el-row>
					 <el-col :span="24">
						   <el-descriptions :column="3" border>
							 <el-descriptions-item min-width="200px" label="报告名称" label-align='center'>{{ report_base_detail.name }}</el-descriptions-item>
							 <el-descriptions-item min-width="200px" label="执行人员" label-align='center'>{{ report_base_detail.create_by_name }}</el-descriptions-item>
							 <el-descriptions-item min-width="200px" label="执行环境" label-align='center'>{{ report_base_detail.run_env_name }}</el-descriptions-item>
							 <el-descriptions-item min-width="200px" label="开始时间" label-align='center'>{{ report_base_detail.create_time }}</el-descriptions-item>
							 <el-descriptions-item min-width="200px" label="结束时间" label-align='center'>{{ report_base_detail.update_time }}</el-descriptions-item>
						   </el-descriptions>
					 </el-col>
				</el-row>
				<el-row>
					<el-col :span="24" style="text-align: center; padding-left: 30px;">
						<el-card class="card">
						   <template #header>
						     <div style="text-align: center;  color: skyblue;">
						       <span>用例总数</span>
						     </div>
						   </template>
						   <div style="text-align: center; color: skyblue;">{{ report_base_detail.all_case_number }}</div>
						 </el-card>
						 <el-card class="card">
						    <template #header>
						      <div style="text-align: center; color: #00FF00;">
						        <span>成功用例数</span>
						      </div>
						    </template>
						    <div style="text-align: center; color: #00FF00;">{{ report_base_detail.success_case_number }}</div>
						  </el-card>
						  <el-card class="card">
						     <template #header>
						       <div style="text-align: center; color: #409eff;">
						         <span>失败用例数</span>
						       </div>
						     </template>
						     <div style="text-align: center; color: #409eff;">{{ report_base_detail.fail_case_number }}</div>
						   </el-card>
						   <el-card class="card">
						      <template #header>
						        <div style="text-align: center; color: #FF0000;">
						          <span>错误用例数</span>
						        </div>
						      </template>
						      <div style="text-align: center; color: #FF0000;">{{ report_base_detail.error_case_number }}</div>
						    </el-card>
							<el-card class="card">
							   <template #header>
							     <div style="text-align: center;  color: rebeccapurple;">
							       <span>API用例数</span>
							     </div>
							   </template>
							   <div style="text-align: center; color: rebeccapurple;">{{ report_base_detail.api_case_number }}</div>
							 </el-card>
							 <el-card class="card">
							    <template #header>
							      <div style="text-align: center;  color: #00FF00;">
							        <span>API成功用例数</span>
							      </div>
							    </template>
							    <div style="text-align: center; color: #00FF00;">{{ report_base_detail.api_success_case_number }}</div>
							  </el-card>
							  <el-card class="card">
							     <template #header>
							       <div style="text-align: center;  color: #409eff;">
							         <span>API失败用例数</span>
							       </div>
							     </template>
							     <div style="text-align: center; color: #409eff;">{{ report_base_detail.api_fail_case_number }}</div>
							   </el-card>
							   <el-card class="card">
							      <template #header>
							        <div style="text-align: center;  color: #FF0000;">
							          <span>API错误用例数</span>
							        </div>
							      </template>
							      <div style="text-align: center; color: #FF0000;">{{ report_base_detail.api_error_case_number }}</div>
							    </el-card>
							 <el-card class="card">
							    <template #header>
							      <div style="text-align: center;  color: seagreen;">
							        <span>UI用例数</span>
							      </div>
							    </template>
							    <div style="text-align: center; color: seagreen;">{{ report_base_detail.ui_case_number }}</div>
							  </el-card>
							  <el-card class="card">
							     <template #header>
							       <div style="text-align: center;  color: #00FF00;">
							         <span>UI成功用例数</span>
							       </div>
							     </template>
							     <div style="text-align: center; color: #00FF00;">{{ report_base_detail.ui_success_case_number }}</div>
							   </el-card>
							   <el-card class="card">
							      <template #header>
							        <div style="text-align: center;  color: #409eff;">
							          <span>UI失败用例数</span>
							        </div>
							      </template>
							      <div style="text-align: center; color: #409eff;">{{ report_base_detail.ui_fail_case_number }}</div>
							    </el-card>
							    <el-card class="card">
							       <template #header>
							         <div style="text-align: center;  color: #FF0000;">
							           <span>UI错误用例数</span>
							         </div>
							       </template>
							       <div style="text-align: center; color: #FF0000;">{{ report_base_detail.ui_error_case_number }}</div>
							     </el-card>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						 <div style="text-align: center; margin: 8px;">
							 <el-progress type="dashboard" :percentage="report_base_detail.success_percent" color="#00FF00">
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">用例成功率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="report_base_detail.fail_percent" color='#409eff'>
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">用例失败率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="report_base_detail.error_percent" color='#FF0000'>
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">用例错误率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="(report_base_detail.api_success_case_number/report_base_detail.api_case_number * 100).toFixed(2)" color="#00FF00">
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">API用例成功率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="(report_base_detail.api_fail_case_number/report_base_detail.api_case_number * 100).toFixed(2)" color='#409eff'>
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">API用例失败率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="(report_base_detail.api_error_case_number/report_base_detail.api_case_number * 100).toFixed(2)" color='#FF0000'>
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">API用例错误率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="(report_base_detail.ui_success_case_number/report_base_detail.ui_case_number * 100).toFixed(2)" color="#00FF00">
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">UI用例成功率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="(report_base_detail.ui_fail_case_number/report_base_detail.ui_case_number * 100).toFixed(2)" color='#409eff'>
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">UI用例失败率</span>
								   </template>
							</el-progress>
							<el-progress type="dashboard" :percentage="(report_base_detail.ui_error_case_number/report_base_detail.ui_case_number * 100).toFixed(2)" color='#FF0000'>
								   <template #default="{ percentage }">
									 <span class="percentage-value">{{ percentage }}%</span>
									 <span class="percentage-label">UI用例错误率</span>
								   </template>
							</el-progress>
						 </div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-table :data="modules" class='table' >
								<el-table-column label="模块名称"  min-width="150" align="center">
									<template #default="scope">
									  <el-tag  effect="dark" round>{{ scope.row.plant_name }}_{{ scope.row.module_name }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="用例总数" prop="all_case_number" min-width="80" align="center"/>
								<el-table-column label="成功数" prop="success_number" min-width="80" align="center" />
								<el-table-column label="失败数" prop="fail_number" min-width="80" align="center"/>
								<el-table-column label="错误数" prop="error_number" min-width="80" align="center"/>
								<el-table-column label='成功率' align="center" min-width="100">
									<template #default="scope">
									  <span>{{ (scope.row.success_number/scope.row.all_case_number*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
								<el-table-column label='失败率' align="center" min-width="100">
									<template #default="scope">
									  <span>{{ (scope.row.fail_number/scope.row.all_case_number*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
								<el-table-column label='错误率' align="center" min-width="100">
									<template #default="scope">
									  <span>{{ (scope.row.error_number/scope.row.all_case_number*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
						</el-table>
					</el-col>
					<el-col :span="12">
						<el-table :data="tags" class='table' style="height: 160px;">
								<el-table-column label="用例标签"  min-width="100" align="center">
									<template #default="scope">
									  <el-tag  effect="dark" round>{{ scope.row.name }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="用例总数" prop="all_case_number" min-width="80" align="center"/>
								<el-table-column label="成功数" prop="success_number" min-width="80" align="center"/>
								<el-table-column label="失败数" prop="fail_number" min-width="80" align="center"/>
								<el-table-column label="错误数" prop="error_number" min-width="80" align="center"/>
								<el-table-column label='成功率' align="center" min-width="100">
									<template #default="scope">
									  <span>{{ (scope.row.success_number/scope.row.all_case_number*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
								<el-table-column label='失败率' align="center" min-width="100">
									<template #default="scope">
									  <span>{{ (scope.row.fail_number/scope.row.all_case_number*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
								<el-table-column label='错误率' align="center" min-width="100">
									<template #default="scope">
									  <span>{{ (scope.row.error_number/scope.row.all_case_number*100).toFixed(2) }}%</span>
									</template>
								</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<el-row>
					
				</el-row>
			</el-header>
			<el-main>
				<el-drawer v-model="editDrawerVisible" direction="rtl" :show-close='false' :size="1000" title="执行日志">
					<template v-for="log_info in one_case_log">
					   <el-row>
						   <el-text v-if="log_info.includes('【success】')" type="success">{{ log_info }}</el-text>
						   <el-text v-if="log_info.includes('【info】')" type="success">{{ log_info }}</el-text>
						   <el-text v-if="log_info.includes('【warning】')" type="warning">{{ log_info }}</el-text>
						   <el-text v-if="log_info.includes('【error】')" type="danger">{{ log_info }}</el-text>
						   <el-text v-if="log_info.includes('【failed】')" type="danger">{{ log_info }}</el-text>
					   </el-row>
					</template>
				</el-drawer>
				<el-table :data="report_logs" class='table'>
						<el-table-column label="序号" width="60" type="index"/>
						<el-table-column label="用例名称" prop="case_name" min-width="200" align="center"/>
						<el-table-column label="用例标签" prop="tag_name" min-width="100" :formatter="formatter_tag" :filters='tag_filter' :filter-method="filterTag" align="center">
							<template #default="scope">
							  <el-tag v-for="item in scope.row.tag_name"  effect="dark" round>{{ item.name }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="用例类型" prop="case_type" min-width="80"  :filters="[{ text: 'API', value: 'API' }, { text: 'UI', value: 'UI' }]" :filter-method="filterType" align="center"/>
						<el-table-column label="所属平台" prop="case_plant" min-width="100"  :filters='plant_filter' :filter-method="filterPlant" align="center"/>
						<el-table-column label="所属模块" prop="case_module" min-width="100" :filters='module_filter' :filter-method="filterModule" align="center"/>
						<el-table-column label='耗时' align="center" min-width="50">
							<template #default="scope">
							  <span>{{ scope.row.time.toFixed(2) }} 秒</span>
							</template>
						</el-table-column>
						<el-table-column label='执行结果' align="center" min-width="80"  :filters="[{ text: '成功', value: '成功' }, { text: '失败', value: '失败' }, { text: '错误', value: '错误' }]" :filter-method="filterResult">
							<template #default="scope">
							  <span v-if="scope.row.result_value === '失败'" style="color: #409eff;">{{ scope.row.result_value}}</span>
							  <span v-if="scope.row.result_value === '错误'" style="color: #FF0000;">{{ scope.row.result_value}}</span>
							  <span v-if="scope.row.result_value === '成功'" style="color: #00FF00;">{{ scope.row.result_value}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" min-width="100">
							<template #default="scope">
							  <el-button :icon="View" size="small" type='primary' @click="view(scope.row)">查看日志</el-button>
							</template>
						</el-table-column>
				</el-table>
			</el-main>
		</div>
	</el-container>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen} from '@element-plus/icons-vue'
import SuiteCondition from '../../components/SuiteCondition.vue'

export default{
	computed:{
		...mapState(['pathPermission', 'projectInfo', 'env_id']),
	},
	components: {
		SuiteCondition
	},
	data() {
		return {
			report_base_detail: '',
			report_logs: [],
			one_case_log: [],
			editDrawerVisible: false,
			plant_filter: [],
			module_filter: [],
			tag_filter: [],
			modules: [],
			tags: [],
		}
	},
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
		}
	},
	methods:{
		filterResult(value, row){
			  return row.result_value === value
		},
		filterTag(value, row){
			for(let tag of row.tag_name){
				if (tag.name === value){
					return true
				}
			}
		},
		filterPlant(value, row){
			  return row.case_plant === value
		},
		filterModule(value, row){
			  return row.case_module === value
		},
		filterType(value, row){
			  return row.case_type === value
		},
		formatter_tag(row, column, cellValue, index){
			if (row.tag_name.length !=0){
				var tags = []
				for (var i = 0; i < row.tag_name.length; i++) {  
				  tags[i] = row.tag_name[i].name
				}
				return tags.join('/')
			}else{
				return '-'
			}
			
		},
		view(row_data){
			this.editDrawerVisible = true
			this.one_case_log = row_data.logs
		},
		handleCurrentChange(){
			this.getReports()
		},
		handleSizeChange(){
			this.getReports()
		},
		search(){
			this.getReports()
		},
		reset(){
			for(let key in this.reportSearch){
				this.reportSearch[key] = ''
			}
		},
		async getReport(){
			const response = await this.$api.getReport(this.$route.query.id)
			if (response.status === 200){
				this.report_base_detail = {...response.data.result}
				this.tag_filter = this.report_base_detail.detail.tag_filter
				this.plant_filter = this.report_base_detail.detail.plant_filter
				this.module_filter = this.report_base_detail.detail.module_filter
				this.modules = this.report_base_detail.modules
				this.tags = this.report_base_detail.tags
			}
		},
		async getLogs(){
			const response = await this.$api.getCaseLogs({report: this.$route.query.id})
			if (response.status === 200){
				this.report_logs = response.data.results
			}
		},
	},
	created() {
		this.getReport()
		this.getLogs()
		
	}
}
</script>

<style scoped>
	.report_detail{
		width: 100%;
		height: 100%;
		background-color: white;
		/* background-color: #f5f7fa; */
	}
	.report_detail .card{
		width: 120px;
		height: 120px;
		float: left;
		margin: 25px 7px;
	}
	.report_detail .card :first-child{
		margin-left: 0px;
	}
	/deep/.el-descriptions__label.el-descriptions__cell.is-bordered-label{
		/* background-color: white !important; */
		width: 60px !important;
	}
	.report_detail .el-progress{
		width: 140px;
		/* margin-top: 15px; */
		margin-right: 40px;
	}
	.report_detail .el-progress--line {
	  margin-bottom: 15px;
	  width: 350px;
	}
	.percentage-value {
	  display: block;
	  margin-top: 10px;
	  font-size: 20px;
	}
	.percentage-label {
	  display: block;
	  margin-top: 10px;
	  font-size: 12px;
	}
	.card span{
		font-size: 12px;
	}
</style>
